<template>
  <div>
    <h2>请求过程显示控制</h2>
    <div v-if="isLoading">
      加载中...
    </div>
    <div v-else>
      <!-- 这里放置请求完成后的内容 -->
      <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      items: [] // 存储请求返回的数据
    };
  },
  mounted() {
    this.fetchData(); // 组件挂载时发送请求
  },
  methods: {
    async fetchData() {
      try {
        this.isLoading = true; // 请求开始，设置加载状态为true

        // 发送请求获取数据
        const response = await axios.get('/api/items');
        this.items = response.data; // 将获取到的数据赋值给items数组

        this.isLoading = false; // 请求完成，设置加载状态为false
      } catch (error) {
        console.error('获取数据失败：', error);
        this.isLoading = false; // 请求失败，设置加载状态为false
      }
    }
  }
};
</script>